<template>
    <div>
        <van-nav-bar title="广场" right-text="新增聊天室" @click-left="onClickRight" @click-right="onClickRight" />

        <van-card title="群聊名称：" thumb="https://th.bing.com/th/id/OIP.bTsMfWwVFFbwYWP6eufRIAHaHa?pid=ImgDet&rs=1"  v-for="(item,index) in ChatGroupList" :key="index">
            <template #tags>
                <div class="texttop">{{item.name}}</div>
                <van-button round type="primary" class="texttop" style="width: 6rem;margin-top: 20px;" @click="goChat(item.key)">加入群聊</van-button>
            </template>
            
        </van-card>

    </div>

    <van-overlay :show="show">
        <div class="wrapper">
            <van-cell-group inset style="margin-top: 40%;">
                <van-field v-model="ChatGroupValue" label="名称" placeholder="请输入创建聊天室名称" />
            </van-cell-group>
            <van-button round type="primary" style="margin-left: 70%; margin-top: 5%;"
                @click="ChatGroupAddEvent">提交</van-button>
        </div>
    </van-overlay>
</template>
  
<script setup>
import { reactive, ref ,onMounted} from 'vue'
import { useRouter } from 'vue-router';
import { PageParamsStore } from '../../store';

const store = PageParamsStore();
const router = useRouter();
const show = ref(false);
const ChatGroupValue = ref("");
const ChatGroupTitle = ref("");
let ChatGroupList = reactive([
    {
        key: "room1",
        name: "测试群聊1",
    },
    {
        key: "room2",
        name: "测试群聊2",
    }
])
// /**
//  * 添加聊天室的网络请求
//  */
// const ChatGroupAddEvent = () => {
//     show.value = false
//     axiosInstance.post('ChatGroup/add?name=' + ChatGroupValue.value)
//         .then(res => {
//             console.log(res);
//             if(res.data.code == 200){
//                 ChatGroupGetEvent()
//             }
//         })
//         .catch(err => {
//             console.log(err);
//             if(err.response.data.code == 404){
//                 showNotify({ message:  err.response.data.message})
//             }
//         })
// }
// /**
//  * 查询全部聊天室
//  */
// const ChatGroupGetEvent = () => {
//     show.value = false
//     axiosInstance.get('/ChatGroup/get')
//         .then(res => {
//             console.log(res);
//             ChatGroupList.splice(0, ChatGroupList.length, ...res.data.data);
//         })
//         .catch(err => {
//             console.log(err);
//             if(err.response.data.code == 404){
//                 showNotify({ message:  err.response.data.message})
//             }
//         })
// }
const goChat = (e) => {
    console.log(e);
    const params = {key: e}
    router.push({
        path: '/chat',
        query: params
    });  
    //更新传递群聊参数
    store.setKey(e);
}
const onClickRight = () => {
    show.value = true
};

onMounted(()=>{
    console.log("页面初始");
    // ChatGroupGetEvent();
})
</script>

<style>

</style>